<template>
	<view class="trading">
		<view class="header">
			<view class="left">
				<view class="text1" @click="master()">{{isZdanzhang?'站长大厅':'申请成为站长'}}</view>
			</view>
			<view class="middle">
				<view class="middle_left" @click="selectIndex1(0)">
					<view class="text1" :class="index1 ==0?'action':''">U银行</view>
				</view>
				<view class="middle_left" @click="selectIndex1(1)">
					<view class="text1" :class="index1 ==1?'action':''">加油站</view>
				</view>
			</view>
			<view class="right" @click="release()">
				<view class="text1">我要发布</view>
			</view>
		</view>

		<view class="black_1">
			{{index1 == 0? info.count_hold_num:info.count_gasoline_num}}
		</view>
		<view class="black_2">求购总数(USDT)</view>
		<view class="black_3">
			<view class="left">日成交量：{{info.day_deal_num}}</view>
			<view class="right">今日单价：{{info.today_unit_price}}</view>
		</view>

		<view class="black_4">
			<view class="left" @click="selectType(0)" :class="index2 == 0?'action':''">我要买</view>
			<view class="left" @click="selectType(1)" :class="index2 == 1?'action':''">我要卖</view>
			<view class="left" @click="selectType(2)" :class="index2 == 2?'action':''">我的发布</view>
		</view>

		<view class="black_5" v-if="index2 != 2">
			<!-- <view class="left" @click="selectPayType()">
				<view class="line_1">
					<view class="text1">支付方式</view>
					<image class="img"
						:src="'/static/tading/'+(isPayType?'shanjiao_select':'shanjiao_noselect')+'.png'">
					</image>
				</view>
				<view class="payTypeList" :class="isPayType?'action1':''">
					<template v-for="(item,index) in payTypeList">
						<view class="pItem" @click="selectPayTypeList(item)">
							<image class="image1" :src="item.url"></image>
							<text class="pt_text1">{{item.name}}</text>
							<uni-icons style="checkbox-filled" size="20" color="#FE903D"></uni-icons>
						</view>
					</template>
				</view>
			</view> -->
			<!-- <view  class="left" @click="selectQujian()"> -->
			<!-- 	<view class="line_1">
					<view class="text1">区间</view>
					<image class="img" :src="'/static/tading/'+(isQujian?'shanjiao_select':'shanjiao_noselect')+'.png'">
					</image>
				</view>
				<view class="payTypeList" :class="isQujian?'action2':''">
					<template v-for="(item,index) in qujianList">
						<view class="pItem" @click="selectQujianList(item)">
							<text class="pt_text1">{{item}}</text>
							<uni-icons style="checkbox-filled" size="20" color="#FE903D"></uni-icons>
						</view>
					</template>
				</view>
			</view> -->
			<view class="left" @click="selectNum()">
				<view class="line_1">
					<view class="text1">{{num}}</view>
					<image class="img" :src="'/static/tading/'+(isNum?'shanjiao_select':'shanjiao_noselect')+'.png'"></image>
				</view>
				<view v-if="isNum" class="payTypeList">
					<template v-for="(item,index) in tab3">
						<view class="pItem" @click.stop="selectQujianList(item)">
							<text class="pt_text1">{{item}}</text>
							<uni-icons v-if="num == item"  type="checkbox-filled" size="25" color="#FE903D"></uni-icons>
						</view>
					</template>
				</view>
			</view>
			<view class="left middle" @click="selectPirce()">
				<view class="line_1">
					<view class="text1">单价</view>
					<image class="img" :src="'/static/tading/'+(isPrice?'xiala_shang':'xiala_xia')+'.png'"></image>
				</view>
			</view>
			<view class="right" @click="toTransactin()">
				<view class="text1">交易列表</view>
				<uni-icons type="right" size="15" color="#FE903D"></uni-icons>
			</view>
		</view>


		<view class="black_6">
			<template v-for="(item,index) in list">
				<view class="item" @click="selecItem(item)">
					<view class="left">
						<!-- <view class="line_1" v-if="index2 !=2">
							<image class="img" src="/static/logo.png"></image>
							<text class="text3">幸运小羊羊</text>
						</view> -->
						<view class="line_1">
							<text class="text1">数量:</text>
							<text class="text2">{{item.num}}</text>
							<text class="text1">{{index1 == 1?'汽油':'USDT'}}</text>
						</view>
						<view class="line_1">
							<text class="text1">总价:</text>
							<text class="text2">{{item.total_price}}</text>
							<text class="text1">{{index1 == 1?'USDT':'元'}}</text>
						</view>
						<view class="line_1" v-if="index2 ==2">
							<view class="text1">时间：</view>
							<uni-dateformat :date="item.add_time*1000" format="yyyy-MM-dd hh:mm:ss">
							</uni-dateformat>
						</view>
						<view class="line_1" v-if=" index1 == 0">
							<template v-for="(itempay,indexpay) in item.collections">
								<image class="pay_img" :src="'/static/tading/'+itempay.type+'.png'"></image>
							</template>
						</view>

					</view>
					<view class="right">
						<view class="line_1" v-if="index2!=2">
							<text class="text1">成单量:</text>
							<text class="text2">{{item.count_trade_inf.finish_num}}/{{item.count_trade_inf.finish_raio}}%</text>
						</view>
						<view class="line_1">
							<text class="text1">¥</text>
							<text class="text3">{{item.unit_price}}</text>
							<text class="text1">/ 单价</text>
						</view>
						<view class="line_1 line_2" v-if="index2 ==0">
							<view class="text4">立即购买</view>
						</view>
						<view class="line_1 line_2" v-if="index2 ==1">
							<view class="text4 text5">出售</view>
						</view>
						<view class="line_1 line_2" v-if="index2 ==2">
							<view class="text4" :class="getRightBtClass(item)" @click="cancal(item.id)">{{getRightBt(item)}}</view>
						</view>

					</view>
				</view>

			</template>
		</view>

		<addUShang ref="addUShang" :success="addUShangSucess"></addUShang>
		<economyPay ref="economyPay" :success="economyPaySucess"></economyPay>
	</view>

</template>

<script>
	import addUShang from '@/components/addUShang/addUShang.vue'
	import economyPay from '@/components/pay/economyPay.vue'
	export default {
		components: {
			addUShang,
			economyPay
		},
		data() {
			return {
				index1: 0,
				index2: 0,
				isPayType: true,
				isQujian: false,
				isNum: false,
				isPrice: false,
				index3: 0,
				payTypeList: [{
						name: '支付宝',
						url: '/static/tading/alipay.png'
					},
					{
						name: '微信',
						url: '/static/tading/weipay.png'
					},
					{
						name: '银行卡',
						url: '/static/tading/bank.png'
					},
					{
						name: 'USDT',
						url: '/static/tading/usdt.png'
					}
				],
				qujianList:["全部","50","100","200","500","1000"],
				info: {
					"today_unit_price": "1.25-1.25",
					"day_deal_num": 46900,
					"count_hold_num": 5173300,
					"count_gasoline_num": 100000
				},
				page: 1,
				list: [{
					"id": 16,
					"num": 1000,
					"unit_price": "1.25",
					"total_price": "1250.00",
					"collections": [{
							"id": 2,
							"type": "wechat"
						},
						{
							"id": 3,
							"type": "alipay"
						}
					],
					"count_trade_inf": {
						"finish_num": 30,
						"finish_raio": 30
					}
				}],
				tab3: ["全部", "1-50", "20-200", "200-500", "1000-00"],
				isZdanzhang: true,
				num:'数量',
				conIds:''
			};
		},
		onShow() {
			this.page = 1;
			this.list.length = 0
			this.listCount()
			this.tradeList()

			this.zdanzhang()
		},
		methods: {
			selectIndex1(index) {
				this.index1 = index
				this.selectType(this.index2)
			},
			selectType(index) {
				this.index2 = index
				// if (this.index2 == 2) {
				// 	return
				// }
				this.page = 1;
				this.list.length = 0
				this.listCount()
				this.tradeList()
			},
			selectPayType() {
				this.isPayType = !this.isPayType
			},
			selectQujian() {
				this.isQujian = !this.isQujian
			},
			selectNum() {
				this.isNum = !this.isNum
			},
			selectPirce() {
				this.isPrice = !this.isPrice
				this.selectType(this.index2)
			},
			// selectPayTypeList(item) {
			// 	this.conIds = item.
			// },
			selectQujianList(item){
				this.isNum = !this.isNum
				this.num = item
				// console.lo
				this.selectType(this.index2)
			},
			selecItem(item) {
				if(this.index2 == 2)
					return
				if(this.index1 == 0 && this.index2 == 0){
					uni.navigateTo({
						url: '/pages/trading/placeAnOrder?type=' + this.index2+'&data='+JSON.stringify(item)
					})
				}else{
					var type = this.index2 == 0?3:4
					this.$refs.economyPay.open(type, item.id, item.total_price)
				}
			},
			master() {
				// this.$refs.addUShang.open()
				if (this.isZdanzhang) {
					uni.navigateTo({
						url: '/pages/trading/stationMasterHall'
					})
				} else {
					this.$refs.addUShang.open()
				}

			},
			release() {
				uni.navigateTo({
					url: '/pages/trading/releaseTrading'
				})
			},
			toTransactin() {
				uni.navigateTo({
					url: '/pages/trading/transactionList'
				})
			},
			listCount() {
				var json = {
					account_type: this.index1 == 0 ? 'usdt' : 'gasoline',
					type: this.index2 == 0 ? 'sell' : 'buy'
				}
				this.api.http.requests('exchange/listCount', json, res => {
					this.info = res.data
				}, "POST")
			},
			tradeList() {
				var json = {
					account_type: this.index1 == 0 ? 'usdt' : 'gasoline',
					type: this.index2 == 0 ? 'sell' : 'buy',
					page: this.page
				}
				
				var url = 'exchange/myRelease'
				if (this.index2 != 2) {
					url = 'exchange/tradeList'
					json.num = this.num == '数量' ?'all':this.num
					json.order = this.isPrice ? 'desc' : 'asc'
				}
				var that = this
				this.api.http.requests(url, json, res => {
					if (res.data && res.data.length > 0) {
						that.list = that.list.concat(res.data)
					}
				}, "POST")
			},
			addUShangSucess() {
				var site_apply_amount = uni.getStorageSync('site_apply_amount')
				this.$refs.economyPay.open(0, 0, site_apply_amount)
			},
			economyPaySucess(password) {

				this.api.http.requests('site/apply', {
					pay_password: password
				}, res => {
					uni.showToast({
						title: res.msg
					})
					this.zdanzhang()
					this.selectType(this.index2)
				}, "POST")
			},
			zdanzhang(){
				this.api.http.requests('site/info', {}, res => {
					this.isZdanzhang = res.data.apply_time == '—' ? false : true
				}, "POST")
			},
			cancal(id){
				this.api.http.requests('exchange/cancel', {
					id: id
				}, res => {
					uni.showToast({
						title: res.msg
					})
					this.selectType(2)
				}, "POST")
			},
			getRightBtClass(item) {
				if (item.status == 0) {
					return "text5"
				}else if(item.status == -1){
					return "text7"
				}else if(item.status == 4){
					return "text8"
				}
				return "text6"
			},
			getRightBt(item, index) {
				if (item.status == 0) {
					return "取消发布"
				}else if(item.status == -1){
					return "已取消"
				}else if(item.status == 4){
					return "已成交"
				}
				return ""
			},
		},
		onReachBottom() {
			this.page = this.page + 1
			this.tradeList()
		}
	}
</script>

<style scoped lang="less">
	.header {
		background-color: #FE903D;
		display: flex;
		justify-content: space-between;
		padding: 40px 10px 10px 10px;
		align-items: center;

		.left {
			.text1 {
				font-size: 25rpx;
				font-weight: bold;
				color: #FE903D;
				text-align: center;
				background: #FFFFFF;
				padding: 2px 5px;
				border-radius: 28rpx;
			}

		}

		.middle {
			margin: auto;
			display: flex;
			text-align: center;

			.middle_left {
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin: 0px 10px;

				.text1 {
					padding: 5px 0px;
				}

				.action {
					border-bottom: 1px solid #FFFFFF;
				}
			}
		}

		.right {
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;

			.text1 {}
		}
	}

	.black_1 {

		text-align: center;
		background-color: #FE903D;
		font-size: 63rpx;
		font-weight: 400;
		color: #FFFFFF;
		padding: 50px 0px 0px 0px;

	}

	.black_2 {
		text-align: center;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFE6D5;
		padding-top: 10rpx;
		background-color: #FE903D;
	}

	.black_3 {
		display: flex;
		justify-content: space-between;
		padding: 10px 30px;
		background-color: #FE903D;
		font-size: 25rpx;
		font-weight: 400;
		color: #FFFFFF;
	}


	.black_4 {
		display: flex;
		justify-content: space-between;
		background-color: white;
		padding-top: 1px;
		font-size: 28rpx;
		font-weight: 400;
		color: #969696;

		text-align: center;

		.left {
			width: 33%;
			padding: 5px 0px;
		}

		.action {
			background: #FE903D;
			color: white;
		}
	}

	.black_5 {
		position: relative;
		// padding: 10px;
		font-size: 28rpx;
		font-weight: 400;
		color: #969696;
		display: flex;
		width: 100%;
		background: #F4F4F4;
		align-items: center;
		align-content: space-between;
		text-align: center;
		.left {
			
			align-items: center;
			padding: 2px 0px;
			.line_1 {
				// background-color: #262626;
				display: flex;
				align-items: center;
				padding: 5px 10px 5px 30px;
				text-align: center;
				margin: auto;
				.text1{
					// margin: auto;
				}
				.img {
						// margin: auto;
					margin-right: 10px;
				}
			}

			.payTypeList {
				// display: none;
				position: absolute;
				width: 100%;
				height: auto;
				padding-bottom: 400px;
				background-color: #00000050;
				z-index: 999;
					
				// border-bottom-left-radius: 5px;
				// border-bottom-right-radius: 5px;
				.pItem {
					// background-color: red;
					display: flex;
					padding: 10px 20px;
					align-items: center;
					background-color: white;
					justify-content: space-between;
				}

			}

			.action1 {
				display: block;
			}

			.action2 {
				display: block;
			}

			.action3 {
				display: block;
			}
		}

		.img {
			margin-left: 5px;
			width: 10px;
			height: 10px;
		}

		.middle {
			flex: 1;
		}

		.right {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
			color: #FE903D;
		}
	}

	.black_6 {

		// padding: 10px  0px;
		.item {
			padding: 10px 10px;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #ECECEC;
			align-items: center;

			.left {
				.line_1 {
					font-size: 25rpx;
					font-weight: 400;
					color: #969696;
					margin-bottom: 5px;
					display: flex;
					align-items: center;
					.img {
						vertical-align: middle;
						width: 25px;
						height: 25px;
						border-radius: 50%;
						margin-right: 5px;
					}

					.text2 {
						font-size: 25rpx;
						font-weight: 800;
						color: #262626;
						padding: 0px 10px;
					}

					.text3 {
						font-size: 28rpx;
						font-weight: 800;
						color: #333333;
					}

					.pay_img {
						width: 15px;
						height: 15px;
						margin-right: 5px;
					}
				}
			}

			.right {
				text-align: end;

				.line_1 {
					font-size: 25rpx;
					font-weight: 400;
					color: #969696;
					margin-bottom: 5px;

					.text2 {

						color: #262626;

					}

					.text3 {
						font-size: 49rpx;
						font-weight: 800;
						color: #FE903D;
					}

					.text4 {
						text-align: center;
						background: #FFFFFF;
						border-radius: 4rpx;
						padding: 2px 8px;
						// width: 80px;
						border: 1rpx solid #FE903D;
						font-size: 25rpx;
						font-weight: 400;
						color: #FE903D;
					}

					.text4_action {
						color: #969696;
						border: 1rpx solid #ECECEC;
					}

				}

				.line_2 {
					display: flex;
					justify-content: end;

					.text5 {
						background: #FE903D;
						color: white;
					}
					.text8,.text7{
						color: #666666;
						border: 0rpx solid #FE903D;
					}
				}
			}
		}
	}
</style>


